<template>
  <page-layout>
    <div slot="toolbar">
      <el-button size="small" round type="primary" @click="newAdmin">新增专业人员</el-button>
    </div>
    <div class="card-header">专业人员管理</div>
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-table
            :data="ProTypes" border stripe
            highlight-current-row
            @current-change="selectExpert" row-class-name="link"  ref="ProTypes">
            <el-table-column
              prop="text"
              label="分类"
              width="280">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="19">
          <el-card >
            <el-table
              :data="admins.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="55">
              </el-table-column>
              <el-table-column prop="proNum" label="专家编号" width="150"></el-table-column>
              <el-table-column prop="name" label="姓名" width="150"></el-table-column>
              <el-table-column prop="username" label="用户名" width="120"></el-table-column>

              <el-table-column
                prop="sex"
                label="性别" width="50">
              </el-table-column>
              <el-table-column
                prop="birth"
                label="年龄" width="50">
                <template slot-scope="scope">
                  {{getAge(scope.row.birth)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="education"
                label="教育程度" width="150">
              </el-table-column>
              <!--<el-table-column-->
                <!--prop="profession"-->
                <!--label="专业" width="150">-->
              <!--</el-table-column>-->
              <el-table-column
                prop="mobile"
                label="手机号">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" @click="editAdmin(scope.$index, scope.row)" type="text">编辑</el-button>
                  <el-button size="mini" type="text" @click="resetPwd(scope.row)">重置密码</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="admins.totalElements"
                :page-size="admins.size"
                :current-page.sync="currentAdminPage" @current-change="adminPageChange">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog :visible.sync="showAdminEditor" title="添加/编辑 专业人员" width="50%">
      <admin-editor @close="onAdminEditorClose" :is-close="showAdminEditor"></admin-editor>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="showResetPwd" width="500px">
      <el-form ref="form" :rules="passRules" :model="resetUserPasswordForm" label-width="80px" class="demo-form">
        <el-form-item label="密码" prop="password">
          <el-input v-model="resetUserPasswordForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPwdCommit('form')">重置</el-button>
          <el-button @click="resetPwdCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import AdminEditor from "./expert-editor";
import { mapGetters } from "vuex";
import md5 from "js-md5";
import Status from "@/libs/status";
import _ from "lodash";
export default {
  created() {
    this.$store.dispatch("getAdmins").then(ret => {});
  },
  mounted() {
    this.ProTypes = _.clone(Status.ProTypes);
    this.ProTypes.unshift({ value: "", text: "全部" });
    this.adminPageChange(1);
  },
  data() {
    return {
      currentAdminPage: 1,
      treeProps: {
        children: "children",
        label: "menuName",
        admins: "admins"
      },
      showAdminEditor: false,
      showRoleSetting: false,
      showResetPwd: false,
      selectedUser: {},
      selectedRole: [],
      resetUserPasswordForm: {
        password: ""
      },
      passRules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 8, max: 15, message: "长度在 8 到 15 个字符", trigger: "blur" }
        ]
      },
      ProTypes: [],
      searchCondition: { userType: "Expert", proType: "", pageSize: 8 }
    };
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      admins: "expertList"
    })
  },
  methods: {
    adminPageChange(val) {
      var tem = Object.assign({ pageIndex: val - 1 }, this.searchCondition);
      this.$store.dispatch("getExpertList", tem).then(ret => {});
    },
    selectExpert(val) {
      this.searchCondition.proType = val.value;
      this.adminPageChange(1);
    },
    newAdmin() {
      this.$store.commit("INIT_CURRENT_EXPERT");
      this.showAdminEditor = true;
    },
    editAdmin(index, row) {
      // this.$store.commit("UPDATE_CURRENT_ADMIN", row);
      this.$store.dispatch("getTSUserByUserName", { username: row.username });
      this.showAdminEditor = true;
    },
    resetPwd(user) {
      this.showResetPwd = true;
      this.selectedUser = user;
      this.resetUserPasswordForm.password = "";
    },
    resetPwdCommit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const payload = {
            userId: this.selectedUser.id,
            password: md5(this.resetUserPasswordForm.password)
          };

          this.$store.dispatch("resetAdminPassowrd", payload).then(ret => {
            this.$notify({
              title: "操作成功",
              type: "success"
            });
            this.showResetPwd = false;
          });
        } else {
          return false;
        }
      });
    },
    resetPwdCancel() {
      this.showResetPwd = false;
    },
    onAdminEditorClose() {
      this.showAdminEditor = false;
      this.$store.dispatch("getAdmins").then(ret => {});
    },
    //根据生日计算年龄
    getAge(birthday) {
      if (_.isUndefined(birthday)) {
        return "";
      }
      var age = -1;
      var today = new Date();
      var todayYear = today.getFullYear();
      var todayMonth = today.getMonth();
      var todayDay = today.getDate();
      if (this.parseDate(birthday) != "时间转换发生错误！") {
        birthday = this.parseDate(birthday);
        var birthdayYear = birthday.getFullYear();
        var birthdayMonth = birthday.getMonth();
        var birthdayDay = birthday.getDate();
        if (todayYear - birthdayYear < 0) {
          this.$notify({
            title: "出生日期选择错误!",
            type: "danger"
          });
        } else {
          if (todayMonth * 1 - birthdayMonth * 1 < 0) {
            age = todayYear * 1 - birthdayYear * 1 - 1;
          } else if (todayMonth * 1 - birthdayMonth * 1 === 0) {
            if (todayDay - birthdayDay >= 0) {
              age = todayYear * 1 - birthdayYear * 1;
            } else {
              age = todayYear * 1 - birthdayYear * 1 - 1;
            }
          } else {
            age = todayYear * 1 - birthdayYear * 1;
          }
        }
        return age * 1;
      } else {
        return -1;
      }
    },
    parseDate(str) {
      console.log(str);
      return new Date(
        str.substring(0, 4) + "/" + str.substring(4, 6) + "/" + str.substring(6)
      );
    },
    getAdminRole(user) {
      return user.roles.reduce(
        (pre, cur) => {
          return { roleName: `${pre.roleName} ${cur.roleName}` };
        },
        { roleName: "" }
      ).roleName;
    }
  },
  components: {
    PageLayout,
    AdminEditor
  }
};
</script>
<style>
</style>
